<template>
  <div>
    <x-infinite v-model="loading" :isFinished="isFinished" @onLoad="onLoad">
      <x-waterfall
        :picturePreReading="true"
        class="px-1 w-full"
        :data="pexelsList"
        nodeKey="id"
        :column="isMobileTerminal ? 2 : 5"
      >
        <template v-slot="{ item, width }">
          <ItemCp :item="item" :width="width"></ItemCp>
        </template>
      </x-waterfall>
    </x-infinite>
  </div>
</template>

<script setup>
import ItemCp from "./Item.vue";
import { getPexels } from "@/api/pexels";
import { ref } from "vue-demi";
import { isMobileTerminal } from "@/utils/flexible";
// const column = ref(2);
// 是否正在加载数据
const loading = ref(false);
// 数据是否加载完毕
const isFinished = ref(false);
// 加载数据中
const onLoad = () => {
  getPexelsList();
};
let query = {
  pageIndex: 1,
  pageSize: 20,
};
const pexelsList = ref([]);
const getPexelsList = async () => {
  // 数据加载完毕 直接返回
  if (isFinished.value) {
    return;
  }
  // 累加分页
  if (pexelsList.value.length) {
    query.pageIndex++;
  }
  const res = await getPexels(query);
  // 第一页直接复制
  if (query.pageIndex === 1) {
    pexelsList.value = res.pexelsList;
  } else {
    // 不是第一个的 添加
    pexelsList.value.push(...res.pexelsList);
  }
  // 总数等于数据长度说明渲染完毕
  if (res.count === pexelsList.value.length) {
    isFinished.value = true;
  }
  loading.value = false;
};
</script>

<style lang="scss" scoped>
</style>